<!-- 该界面本来作为点赞评选的前置界面，2023-09-07取消了使用该界面。废弃了 -->
<script setup lang="ts">
import bg from 'src/assets/previous-works/p1.webp'
import type { PreviousWork } from '~/api'
import { getPreviousWorks } from '~/api'
import SectionTitle from '~/components/SectionTitle.vue'
import PhotoCard from './components/PhotoCard.vue'

const router = useRouter()
const activeKey = ref('')
const loading = ref(true)
const workName = ref('')

const AllShow = ref(false)

const store = useTeamInfoStore()

const { basicInfo } = storeToRefs(store)

const { data: works, run: getList } = useRequest(getPreviousWorks, {
  manual: true,
})

const groupList = computed(() => {
  loading.value = false
  const arr = []
  if (!works.value)
    return {}
  return works.value.data.reduce<Record<string, PreviousWork[]>>((obj, d) => {
    arr.push(d)
    return arr
  }, {})
})

if (basicInfo.value?.scheduleId)
  getList({ scheduleId: basicInfo.value?.scheduleId, worksName: workName.value, orderType: 'DESC', orderVal: 'upvote_count' })

function search() {
  router.push({
    path: '/upvoteSearch',
    query: { worksName: workName.value },
  })
  getList({ scheduleId: basicInfo.value?.scheduleId, worksName: workName.value, orderType: 'DESC', orderVal: 'upvote_count' })
}
</script>

<template>
  <PageItem :bg="bg" show-footer :content-style="{ flex: 1 }">
    <div h-full py="4vw">
      <n-scrollbar trigger="none">
        <n-tabs>
          <n-tab-pane label="当届大赛作品" />
        </n-tabs>
        <div>
          <n-input-group>
            <n-input v-model:value="workName" :style="{ width: '100%', border: '1px solid rgba(186, 54, 210, 1)' }" />
            <n-button type="primary" ghost style="height:36px" @click="search">
              <span class="i-carbon:search" />
            </n-button>
          </n-input-group>
          
        </div>
        </n-scrollbar>
    </div>

    <div>
      <div grid="~ cols-4 justify-center gap-4vw lt-lg:(cols-1)" m="b-10">
        <template v-if="groupList.length">
          <PhotoCard v-for="(item, index) of groupList" :id="item.worksId" :key="index" :max-height="150" :title="item.worksName" :desc="item.content" :img-url="item.worksImgMainUrl" v-show="!AllShow ? (index < 20) : true"/>
        </template>
      </div>
      <div m="t-2vw" text="center">
          <div v-if="groupList.length > 20 && !AllShow" btn @click="AllShow = !AllShow">
            查看更多
          </div>
        </div>
    </div>
  </PageItem>
</template>

<style scoped>
@media screen and (min-width: 768px) {
  .PhotoCard-one{
    width: calc(100% / 3);
  }
}
@media screen and (max-width: 768px) {
  .PhotoCard-one{
    width: 100%;
  }
}

:deep(.n-scrollbar-rail.n-scrollbar-rail--vertical) {
  display: none;
}
</style>
